var ScrollSelector = (function () {
  var ScrollSelector = function (dom, feRoot) {
    this.dom = dom;
    this.feRoot = feRoot;
    this.init();
  };

  ScrollSelector.prototype.init = function () {
    var selectorHTML = '<div class="selector" fe-role="Grille"></div>';
    this.dom.innerHTML = selectorHTML;
    this.feRoot.reRender();
    this.grilleDom = this.dom.querySelector('.selector');
    this.id = this.grilleDom.id;
    console.log('id:' + this.id);
    this.grille = this.feRoot.getWidgetById(this.id);
    var self = this;
    this.grille.setItemRender(function (data) {
      var itemData = self.itemDataRender(data);
      var html = '<div class="selector-item" fe-role="Widget">' + itemData.name + '</div>';
      return html;
    });
    console.log('grille:' + this.grille);
    this.grille.on('scrollend', function (e) {
      self.dataIndex = e.target.dataIndex;
      console.log(e.target.dataIndex);
      if (self.dataIndex != self.lastDataIndex) {
        self.lastDataIndex = self.dataIndex;
        self.changeCallback(self.data[self.dataIndex]);
      }
    });
  };

  ScrollSelector.prototype.setData = function (data, index) {
    this.data = data;
    this.grille.setData(data, index);
    this.dataIndex = index || 0;
    this.lastDataIndex = this.dataIndex;
  };

  ScrollSelector.prototype.getSelectedData = function () {
    return this.data[this.dataIndex];
  };

  ScrollSelector.prototype.setItemData = function (func) {
    this.itemDataRender = func;
  };

  ScrollSelector.prototype.onChange = function (func) {
    if (typeof func != 'function') {
      return;
    }
    this.changeCallback = func;
  };

  return ScrollSelector;
})();
